<template>
  <div class="container">
    <el-row>
      <el-form :model="formInline" @keyup.enter.native="search">
        <el-col :span="6" align="left">
          <el-form-item :label="$t('m.out.waveordercode')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.waveordercode" placeholder></el-input>
          </el-form-item>
          <el-form-item :label="$t('m.out.storeordercode')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.storeordercode" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" align="left">
          <el-form-item :label="$t('m.in.ordernumber')" :label-width="formLabelWidth">
            <el-input maxlength="30" show-word-limit v-model="formInline.ordernumber"></el-input>
          </el-form-item>
          <el-form-item label="SKU" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.sku"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" align="left">
          <el-form-item :label="$t('m.state')" :label-width="formLabelWidth">
            <el-select v-model="formInline.stateid" :placeholder="$t('m.choose')">
              <el-option v-for="item in states" :key="item.id" :label="item.label" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="SupplierCode" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.suppliercode" placeholder></el-input>
          </el-form-item>
        </el-col>
         <el-col :span="6" align="left">
          <el-form-item :label="$t('m.pick.tasknumbercode')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.tasknumber" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-form-item>
            <el-button type="primary" @click="search" v-if="hasPermission('search')">{{$t('m.query')}}</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="ellipse"></div>
    <el-table ref="table" stripe empty-text fits class="table-wrap single-select-table" :data="tableData" :row-style="tableRowStyle" :row-class-name="tableRowClassName" @row-click="rowClick" @selection-change="handleSingleSelectionChange" v-loading="tableLoading">
      <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
      <el-table-column align="center" prop="waveordercode" :label="$t('m.out.waveorder')">
        <template slot-scope="scope">
          <template v-if="hasPermission('search')">
            <el-button @click.stop="getWaveorder(scope.row.waveorderid)" type="text">{{scope.row.waveordercode}}</el-button>
          </template>
          <template v-else>{{scope.row.waveordercode}}</template>
        </template>
      </el-table-column>
      <el-table-column :label="$t('m.state')" align="center" prop="state">
        <!-- 1 待处理 2 待拣货 3 部分拣货 4 拣货完成 5 已取消  -->
        <!-- <template slot-scope="scope">
          <span v-if="scope.row.stateid==1">{{$t('m.quality.state1')}}</span>
          <span v-if="scope.row.stateid==2">{{$t('m.out.state2')}}</span>
          <span v-if="scope.row.stateid==3">{{$t('m.out.state6')}}</span>
          <span v-if="scope.row.stateid==4">{{$t('m.out.state7')}}</span>
          <span v-if="scope.row.stateid==5">{{$t('m.review.state2')}}</span>
        </template>-->
      </el-table-column>
      <!-- <el-table-column :label="$t('m.out.group')" align="center" prop="sortinggroup"></el-table-column> -->
      <el-table-column align="center" prop="pickingtask" :label="$t('m.out.pickingtask')"></el-table-column>
      <el-table-column align="center" prop="orderqty" :label="$t('m.out.orderqty')"></el-table-column>
      <el-table-column align="center" prop="totalqty" :label="$t('m.out.totalqty')"></el-table-column>
      <el-table-column align="center" prop="createdate" :label="$t('m.createdate')"></el-table-column>
      <el-table-column align="center" prop="endsortingdata" :label="$t('m.out.modifydate')"></el-table-column>
    </el-table>

    <el-pagination background layout="sizes, prev, pager, next, jumper" :page-sizes="pageSizeList" :page-size="rowSize" :current-page="page" :total="totalRows" @current-change="currentChangeInitFn" @size-change="handleSizeChangeInitFn"></el-pagination>
    <!-- 波次单 dialog 开始 -->
    <el-dialog width="1400px" :title="$t('m.out.waveorder')" :visible.sync="dialogFormVisible1">
      <el-row :gutter="30" class="waveHead">
        <el-col :span="8">
          <b>{{$t('m.out.waveordercode')}}:</b>
          <span>{{waveForm.waveordercode}}</span>
        </el-col>
        <el-col :span="8">
          <b>{{$t('m.state')}}:</b>
          <span>{{waveForm.state}}</span>
        </el-col>
        <el-col :span="8">
          <b>{{$t('m.createdate')}}:</b>
          <span>{{waveForm.createdate}}</span>
        </el-col>
      </el-row>
      <el-table empty-text fits class="waveTable" ref="waveTable" :span-method="objectSpanMethod" :data="table">
        <el-table-column align="center" prop="__index" :label="$t('m.index')" width="50"></el-table-column>
        <el-table-column align="center" width="150" prop="ordercode" :label="$t('m.in.ordernumber')"></el-table-column>
        <el-table-column align="center" prop="tasknumber" label="TaskNmuber"></el-table-column>
        <el-table-column align="center" prop="sdstate" :label="$t('m.state')">
          <template slot-scope="scope">{{scope.row.sdstate|stateFilter(lan)}}</template>
        </el-table-column>
        <el-table-column align="center" prop="productspeccode" label="SKU"></el-table-column>
        <el-table-column align="center" prop="suppliercode" label="SupplierCode"></el-table-column>
        <el-table-column align="center" prop="productname" :label="$t('m.in.productname')" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="productspec" :label="$t('m.in.productspec')" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="locationcode" :label="$t('m.page.location')"></el-table-column>
        <el-table-column align="center" prop="quantity" :label="$t('m.out.quantity')"></el-table-column>
        <el-table-column align="center" prop="stockoutquantity" :label="$t('m.pick.shortageqty')"></el-table-column>
        <el-table-column width="100" align="center" :label="$t('m.out.tsareaid')" prop="tsareacode"></el-table-column>
      </el-table>
      <div class="btns">
        <el-button size="mini" @click="close(waveForm)">{{$t('m.close')}}</el-button>
      </div>
    </el-dialog>
    <!-- 波次单 dialog 结束 -->
  </div>
</template>

<script>
import common from '@/utils/common'
export default {
  name:'Sorting',
  data(){
    return {
      table:[],
      taskid:null,
      tsarea:'',
      isSelect:false,
      formInline:{
        ordernumber:'',
        waveordercode:'',
        sku:'',
        stateid:null,
        storeordercode:'',
        suppliercode:null,
        tasknumber:''
      },

      tableData:[],
      dialogFormVisible:false,
      dialogFormVisible1:false,
      shop:[],
      warehouse:[],
      region:[],
      formLabelWidth:'180px',
      waveForm:{
        ordercode:'',
        waveordercode:'',
        waveorderid:null,
        value:''
      },
      sortForm:{},
      tarea:[],
      formTaskid:{
        taskid:null
      }
    }
  },
  filters:{
    stateFilter(val, lan){
      let result = ''
      switch (val){
      case 1: result = lan('m.sorting.state1'); break
      case 2: result = lan('m.sorting.finish'); break
      case 20: result = lan('m.sorting.state20'); break
      }
      return result
    }
  },
  computed:{
    states(){
      return [
        {
          id:null,
          label:this.$t('m.all')
        },
        {
          id:4,
          label:this.$t('m.out.state7')
        },
        {
          id:5,
          label:this.$t('m.review.state3')
        }
      ]
    }
  },
  methods:{
    lan(arg){
      return this.$t(arg)
    },
    // 表格缩进
    objectSpanMethod({ rowIndex, columnIndex }){
      let MergeArr = [0, 1, 11]
      if (MergeArr.includes(columnIndex)){
        if (!this.getMergeRows.length){
          return {
            rowspan:1,
            colspan:1
          }
        } else {
          return {
            rowspan:this.getMergeRows[rowIndex],
            colspan:this.getMergeRows[rowIndex] ? 1 : 0
          }
        }
      }
    },
    init(){
      this.tableLoading = true
      this.$axios({
        method:'get',
        url:'/sorting/history',
        params:Object.assign({}, this.formInline, {
          page:this.page,
          rows:this.rowSize
        })
      }).then(({ data }) => {
        for (let i = 0;i < data.records.length;i++){
          data.records[
            i
          ].createdate = common.timestampToTime(
            data.records[i].createdate
          )
          if (data.records[i].endsortingdata){
            data.records[
              i
            ].endsortingdata = common.timestampToTime(
              data.records[i].endsortingdata
            )
          } else {
            data.records[i].endsortingdata = '- -'
          }
        }

        this.tableData = data.records
        this.totalRows = data.total
        setTimeout(()=>this.tableLoading=false,500)
      })
    },
    search(){
      this.page = 1
      this.init()
    },

    close(){
      this.dialogFormVisible1 = false
      this.init()
    },
    closeSortForm(){
      this.dialogFormVisible = false
      this.init()
    },
    sorting(){
      this.dialogFormVisible = true
    },
    getWaveorder(id){
      this.table=[]
      this
        .$axios({
          method:'get',
          url:`/sorting/getSortDetailByWaveOrderId?waveorderid=${id}`
        })
        .then(({ data }) => {
          data.createdate = common.timestampToTime(
            data.createdate
          )
          for (
            let i = 0;
            i < data.waveorderDetailOutput.length;
            i++
          ){
            data.waveorderDetailOutput[i].tsareaid = null
          }
          this.waveForm = data
          let waveOrderList = this.cloneObject(this.waveForm.waveorderDetailOutput)
          // 格式化数据
          waveOrderList.map((item, index) => {
            item.waveorderdetailList.map((__item) => {
              this.table.push(Object.assign({}, __item, { __index:index + 1, ordercode:item.ordercode, tsareacode:item.tsareacode || '', tsareaid:item.tsareaid || '' }))
            })
          })
          let __index = 0
          let code = ''
          this.getMergeRows = []
          this.table.forEach((item, index) => {
            if (item.ordercode !== code){
              this.getMergeRows.push(1)
              code = item.ordercode
              __index = index
            } else {
              if (code){
                ++this.getMergeRows[__index]
                this.getMergeRows.push(0)
              }
            }
          })
          this.dialogFormVisible1 = true
        })
    },
    getTarea(){
      this.$axios({
        method:'get',
        url:'/tsarea/list'
      }).then(({ data }) => {
        this.tarea = data
      })
    },
    getArea(index, id){
      this.isSelect = true
      this.waveForm.waveorderDetailOutput[index].tsareacode = this.tarea.filter((item) => { return item.tsareaid === id })[0].tsareacode
    }
  },
  activated(){
    this.init()
    this.getTarea()
  },
  beforeRouteLeave(to, form, next){
    this.dialogFormVisible=false
    this.dialogFormVisible1=false
    next()
  }
}
</script>
<style lang="scss" scoped>
.el-form-item--mini span {
  font-size: 10px;
}
.el-select {
  width: 100%;
}

.waveList div.item {
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: scroll;
  padding: 0 5px;
}
.waveList div::-webkit-scrollbar {
  display: none;
}
.waveHead {
  margin-bottom: 30px;
}
.waveHead b {
  margin-right: 10px;
}
</style>